import unit from '../js/tool/unit.js';
import {routerConfig} from './entry_kfm_spa.js';
import kfm_png from '../img/kfm.png';
import searchButton_png from '../img/search/searchButton.png'
import 'style-loader!css-loader!../css/kfm_animation.css';
import Vuex from 'vuex';
import Vue from "vue/dist/vue.js";
import {config} from './configData.js';
Vue.use(Vuex);
/*
* 符号说明:
   * *  :表示非组件
   * +* :表示根组件
   * -* :表示子组件
* index
   * setTimeout
   * dataGeneration
   * getRidOfPX
   * observer
   * addStylePX
+* header
   -* HeaderList
   -* headerTop
* */

let styleUnit = {
    mediateCompute:function (contextH,h) {
        /*居中计算,用于将元素上下居中*/
        /*
        * contextH:居中的上下文的高
        * h:要居中的元素的高
        * */
        return (contextH-h)/2;
    }
};

// export let config = {
//     //需要与scrollCss中的-webkit-scrollbar的width保持一致
//     scrollbar_w:6,
//     nav_h:75
// };

/*search-bar组件*/
/*
* 作用:
* 绘制搜索栏,点击搜索按钮后传递给后台进行搜索
* */

let searchBar = {
    template:
    '<div id="searchBar" :style=[searchBarStyle]>' +
        '<transition name="searchImg">' +
            '<div id="displaySearchImg" v-show="display()" :style="DSIStyle">' +
                '<img :src="loadSearchButtPng()" :style=[searchImgStyle]  v-on:click="switchDisplay">' +
            '</div>'+
        '</transition>'+
        '<transition name="searchBar">' +
            '<div id="displaySearchBar" v-on:click="switchDisplay">' +
                '<textarea class="searchInput" :style=[inputStyle] placeholder=" 开发中..."></textarea>'+
            '</div>'+
        '</transition>'+
    '</div>',
    data:function () {
        let getSearchW = function () {
            return 200;
        };
        let getSearchH = function () {
            return 22;
        };
        let getButtonW = function () {
            return getSearchW()-getSearchW();
        };
        return {
            displayData:{
                ok:true
            },
            searchBarStyle:{
                position:'relative',
                display:'inline-block',
                float:'right',
                top:styleUnit.mediateCompute(config.nav_h,getSearchH())+4+'px',
                right:10+'px',
                width:getSearchW()+'px',
                height:getSearchH()+'px',
            },
            inputStyle:{
                position:'absolute',
                resize:'none',
                fontSize:16+'px',
                border:0,
                padding:0,
                margin:0,
                zIndex:2,
                outline:'none',
                width:getSearchW()+'px',
                height:getSearchH()+'px',
            },
            buttonStyle:{
                position:'absolute',
                border:0,
                padding:0,
                margin:0,
                cursor:'Pointer',
                width:getButtonW()+'px',
                height:getSearchH()+'px'
            },
            DSIStyle:{
                position:'absolute',
                backgroundColor:'#000000',
                zIndex:3,
                width:getSearchW()+'px',
                height:getSearchH()+'px',
            },
            searchImgStyle:{
                cursor:'Pointer',
                float:'right'
            }
        }
    },
    methods: {
        loadSearchButtPng:function () {
            return searchButton_png;
        },

        display:function () {
            return this.$data.displayData.ok;
        },
        switchDisplay:function () {
            this.$data.displayData.ok = !this.$data.displayData.ok;
        }
    }
};


/*header组件*/
/*
* 作用:
* 绘制最顶部的列表内容,包含数个横向列表
* 位于HeaderTop的下方
* */
let HeaderList = {
    template:
    '<div id="HeaderList" :style="[HeaderListStyle]">' +
    '<a v-for="list in HeaderListData" :class="list.to" :key="list.id" :style="HeaderA" @click="list.jump">' +
    '<div :style="HeaderText">' +
    '{{list.LiText}}' +
    '</div>' +
    '</a>' +
    '</div>',
    data:function () {
        let getFrontSize = function () {
            return 26;
        };
        return {
            HeaderListData:[
                {
                    id:1,
                    LiText:'首页',
                    to:'/home',
                    jump:function () {
                        // console.log('/homepage');
                        routerConfig.router.$router.push('/homepage');
                    },
                    UlColor:{backgroundColor:"#eaf280"}
                },
                {
                    id:2,
                    LiText:'前端源码',
                    to:'/source_code',
                    jump:function () {
                        // console.log('/source_code');
                        routerConfig.router.$router.push('/source_code');
                    },
                    UlColor:{backgroundColor:"#cece5a"}
                },
                {
                    id:3,
                    LiText:'前端纪事',
                    to:'/record_event',
                    jump:function () {
                        // console.log('/record_event');
                        routerConfig.router.$router.push('/record_event');
                    },
                    UlColor:{backgroundColor:"#dce072"}
                },
            ],
            HeaderListStyle:{
                position:'relative',
                display:'inline-block',
                top:styleUnit.mediateCompute(config.nav_h,getFrontSize())+'px',
                float:'right',
                right:50+'px'
            },
            HeaderA:{
                display:'inline-block',
                marginLeft:30+'px',
                height:100+'%',
                fontSize:getFrontSize()+'px',
                cursor:'Pointer',
                color:'#ffffff'
            },
            HeaderText:{
                // marginTop:22+'px',
                color:'#ffffff',
            }
        }
    },
};

/*
* 作用:
* 绘制最顶部的内容,包含一个logo,几行字和一个搜索栏
* */
let headerTop = {
    props:['headerWidth','headerHeight'],
    template:
    '<div id="HeaderTop" :style="[headerTopStyle]">' +
    '<img id="logo" :src="logoLoad()" :style=[logoStyle] />'+
    '<div id="HeaderTopTextArea" :style="[HeaderTopTextAreaStyle]">' +
    '<p :style="[HeaderTopText]">{{text.top}}</p>' +
    '<p :style="[HeaderTopText2]">{{text.top2}}</p>'+
    '</div>'+
    '<search-bar></search-bar>'+
    '<header-list></header-list>'+
    '</div>',
    data:function () {
        return {
            logoStyle:{
                position:'absolute',
                display:'inline-block',
                left:40+'px'
            },
            text:{
                top:'咖啡猫技术客栈',
                top2:'专注前端视觉呈现'
            },
            headerTopData:{
                width:0,
                height:0
            },
            headerTopStyle:{
                backgroundColor:'#000000',
                width:0,
                height:0
            },
            HeaderTopTextAreaData:{
                left:0,
                top:0
            },
            HeaderTopTextAreaStyle:{
                position:'absolute',
                display:'inline-block',
                left:150+'px',
                top:4+'px'
            },
            HeaderTopText:{
                fontSize:2+'em',
                color: '#44e3f8',
                textShadow: '0 0 50px #3db4ca'
            },
            HeaderTopText2:{
                fontSize:1.2+'em',
                color: '#44e3f8',
                textShadow: '0 0 50px #3db4ca'
            }
        };
    },
    methods:{
        logoLoad:function () {
            return kfm_png;
        },
        updateHeaderTop:function () {
            this.$data.headerTopStyle.width=this.$props.headerWidth;
            this.$data.headerTopStyle.height=this.$props.headerHeight;
        },
        update:function(){
            this.updateHeaderTop();
        }
    },
    mounted:function () {
        this.updateHeaderTop();
        unit.observer.add('headerTop',this.update);
    },
    components:{
        'header-list':HeaderList,
        'search-bar':searchBar
    }
};

/*
* 作用:
* 绘制header的所有内容
* */
let header = {
    template:
    '<div id="header" v-on:resize="updateHeader()" :style="[headerStyle]">' +
    '<header-top :headerWidth="headerStyle.width" :headerHeight="headerStyle.height"></header-top>'+
    '</div>' ,
    data:function () {
        let getHeader_h = function () {
            return config.nav_h;
        };

        return {
            headerData:{
                width:0,
                height:getHeader_h()
            },
            headerStyle: {
                position:'absolute',
                display:'block',
                width:window.innerWidth+'px',
                height:getHeader_h()+'px'
            }
        }
    },
    methods:{
        updateHeader:function () {
            this.$data.headerStyle.width = window.innerWidth+'px';
        },
    },
    mounted:function () {
        unit.observer.add('header',this.updateHeader)
    },
    components:{
        'header-top':headerTop
    }
};
/*header组件结束*/

/*nav组件*/
export let nav = {
    el:'#nav',
    data:{
    },
    components:{
        'nav-header':header
    }
};

/*nav组件结束*/

